import router from './router'
// 2.4所以我们要引入store
import store from '@/store'
// 5.2 引入页面加载进度条的组件
import NProgress from 'nprogress' // progress bar
// 5.3引入页面加载进度条组件的css样式
import 'nprogress/nprogress.css' // progress bar style
// 定义白名单
const whiteList = ['/login', '/404']

// 路由前置守卫
router.beforeEach(async (to, from, next) => {
  // 2.1在导航守卫里判断有没有token
  // 2.2那么怎么拿到token呢？
  // 2.3我们这时联想到我们在store我们设置了一个全局getters，那里面我们存了token
  // 2.5接着拿到token
  // 5.1我们要给页面跳转的时候加个进度条
  // 5.4使用页面加载进度条组件
  //  NProgress.start()启动进度条
  NProgress.start()
  const token = store.getters.token
  // console.log(token)
  if (token) {
    // 3.1如果有token，那么就判断是否要去登录页面
    // console.log(typeof token)
    if (to.path === '/login') {
      // 3.2如果是那就让它直接转到主页面，因为有token了，不需要重复登录
      //   6.5下面一行代码就是前置守卫做了拦截并且拦截到其他页面了next('/')；而next() 这样是没有拦截到其它网页
      // 6.6需要我们自己手动关闭进度条
      // console.log(111)
      next('/')
      NProgress.done()
    } else {
      // 3.3如果不是,那就正常放行
      // console.log(router.options)
      //   if (!store.state.user.userInfo.name) {
      //     // 如果vuex中的userId是空的，那就表明还没有根据token来获得当前登录者的信息，所以我们需要获得一下当前登录者的信息。
      //     const res = await store.dispatch('user/getUserInfo')
      //     // const menus = res.roles.menus
      //     console.log(res)
      //     // 获取完当前登陆者的信息之后，我们要根据登陆者的信息中的权限点，来动态的设置路由。
      //     // 在动态设置路由之前，我们可以先试一试，将原本的全部的动态路由添加到routes里面看看能不能访问到这些动态的路由。
      //     // 这里向routes这个数组里添加东西的时候，不能使用push()之类的方法，切记！！
      //     // 使用的是addRoutes()这个专用于向路由中添加动态路由的方法。
      //     // 实现证明，这个方法是可以的。
      //     // 所以，接下来就是想办法拿到用户的页面权限的路由了。
      //     // 我们想到的办法是$router.options.routes 拿到路由，但是这种方法拿到的路由不是更新完的路由，而是原本没跟新的路由，因为routes不是响应式的。
      //     // 所以我们想到了vuex这个响应式的方式来拿路由。
      //     // const otherRoutes = await store.dispatch(
      //     //   'routesInfo/filterRoutes',
      //     //   menus
      //     // )
      //     // console.log(otherRoutes)
      //     // addRoutes()这个方法是异步的，我们这样写完，确实可以将动态路由添加到routes里面，也可以直接使用地址访问对应的页面，但是却不会在左侧菜单栏看到响应的菜单选项，这还是因为routes不是响应式的，但我们的左侧菜单栏确实根据routes来渲染的。
      //     // router.addRoutes([
      //     //   ...otherRoutes,
      //     //   { path: '*', redirect: '/404', hidden: true }
      //     // ])
      //     //
      //     // next({
      //     //   ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
      //     //   replace: true // 重新进一次，但不保留历史纪录
      //     // })

      //     return
      //   }
      if (!store.state.user.userInfo.name) {
        await store.dispatch('user/getUserInfo')
      }
      // 如果userId不为空，那就表明人家已经登录完了，现在只是在切换页面而已，咱不需要干嘛，直接放行
      next()
    }
  } else {
    // 4.1如果没有token，那就看要去的路径是否在白名单里面
    if (whiteList.includes(to.path)) {
      // 4.2如果是在白名单里面那就放行
      // console.log(333)
      next()
    } else {
      // 4.3如果不在白名单里面那就跳转到登录页面
      // console.log(444)
      next('/login')
      NProgress.done()
    }
  }
})

// 路由的后置守卫
router.afterEach((route) => {
  NProgress.done()
})
